---
title: "SSRM Sorting"
enterprise: true
---

This section covers Server-Side Sorting using the Server-Side Row Model.

## Sorting

Sorting is enabled by default in the grid and controlled via the `sortable` column definition attribute.

```{% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: 'country'},
        // Disable sorting by sport
        { field: 'sport', sortable: false },
    ]
}
```

For more details on sorting configurations see the section on [Row Sorting](./row-sorting/).

## Server-side Sorting

The actual sorting of rows is performed on the server when using the Server-Side Row Model. When a sort is applied in the
grid a request is made for more rows via `getRows(params)` on the [Server-Side Datasource](./server-side-model-datasource/).

The request object sent to the server contains sort metadata in the `sortModel` property, an example is shown below:

```js
// Example request with sorting info
{
    sortModel: [
        { colId: 'country', sort: 'asc' },
        { colId: 'year', sort: 'desc' },
    ]
}
```

Notice in the snippet above that the `sortModel` contains an array of models for each column that has active sorts in
the grid. The column ID and sort type can then be used by the server to perform the actual sorting.

The example below demonstrates sorting using the SSRM. Note the following:

* The server uses the metadata contained in the `sortModel` to sort the rows.
* Open the browser's dev console to view the `sortModel` supplied in the request to the datasource.
* Try single / multi-column (using {% kbd "⇧ Shift" /%} key) sorting by clicking on column headers.

{% gridExampleRunner title="Server Side Sorting" name="server-side-sorting" /%}

## Client-side Sorting

The Server-Side Row Model supports client-side sorting, which can be enabled using the property `serverSideEnableClientSideSort`.
With this property enabled, if the grid has all of the rows belonging to a group, the grid can sort these rows on the client-side.

The example below demonstrates client-side sorting using the SSRM. Note the following:

* `serverSideEnableClientSideSort` is set to true
* Any row group with fewer than 100 rows (the default `cacheBlockSize`) can be sorted via the client-side upon loading. Additionally, scrolling down through all of the blocks inside of a group until all rows are loaded will allow that row group to switch to using client-side sorting.
* Sorting the Athlete column happens client-side - the rows are not replaced by loading rows, and a request to the server is not made. This is because the child rows for the expanded row group are all loaded and can be sorted client-side.
* Sorting the Group column or any of the aggregated columns happens server-side - the rows are replaced by loading rows, and a request to the server is made. This is because the number of top-level rows exceeds the default `cacheBlockSize` value of 100 and the grid doesn’t have all the rows client-side in order to sort them.
* After the grid is loaded, scroll down to the bottom of the grid - this loads all of the top-level rows. At this point all the top-level rows have been loaded which allows sorting the Group column or any of the aggregated columns to happen client-side. This is why when sorting the rows are not replaced by loading rows and a request to the server is not made.

{% gridExampleRunner title="Client Side Sorting" name="client-side-sorting" /%}

## Sorting All Levels

By default, the SSRM will attempt to reduce the number of requests it will make to your server when a column is sorted. It does this by attempting to preserve groups where the grid does not expect the rows to contain any data, for example see the following two scenarios:
- If a sort is applied to a column with an aggregation, all of the cells in this column are expected to have data, and so everything will be refreshed
- If a sort is applied to a column which is neither grouped, or aggregated, then the grid will only sort the leaf level groups. This is because it does not expect the group rows to have data for this column.

In the SSRM it is possible to provide the grid with additional group row data which you may wish to be sorted. To disable this caching behaviour and instead always refresh from the server when a sort is attempted, enable the property `serverSideSortAllLevels: true`

The example below demonstrates this property. Note the following:
* `serverSideSortAllLevels` is set to true
* The Random Number column uses a `valueGetter` to generate a random number for every node
* When the `Random Number` column is sorted, it correctly re-fetches from the server (even though the order is incorrect!)

{% gridExampleRunner title="Sort All Levels" name="sort-all-levels" /%}

## Next Up

Continue to the next section to learn about [SSRM Filtering](./server-side-model-filtering/).
